<template>
	<view class="container">
		<view class="foster-order-top" v-if="user!=''">
			<!-- <view class="top">
				<image :src="user.head_pic" mode="widthFix"></image>
				<view class="nickname">{{user.nickname}}</view>
			</view> -->
			<view class="shuju-items">
				<view class="shuju-item">
					<view class="hint">认养总数</view>
					<view class="num">{{user.ry_number}}</view>
				</view>
				<view class="shuju-item" @click="navigateTo('/pages/center/my-wallet')">
					<view class="hint">已领取数量</view>
					<view class="num">{{user.ylq_number}}</view>
				</view>
				<view class="shuju-item" @click="navigateTo('/pages/center/my-wallet-dlq')">
					<view class="hint">待领取</view>
					<view class="num">{{user.dlq_number}}</view>
				</view>
				<view class="shuju-item">
					<view class="hint">加速领取数</view>
					<view class="num">{{user.speed_number}}</view>
				</view>
			</view>
		</view>
		<view class="foster-order-items">
			<my-tab :list="list1" bgColor="#fff" :current="currentIndex" @itemClick='itemClick'></my-tab>
			<scroll-view scroll-y class="scroll" v-if="list.length>0">
				<view class="order-items">
					<view class="order-item" v-for="(item,index) in list" :key="index" @click="toDetail(item,index)">
						<view class="top">
							<view class="left">
								<view class="logo-left">
									<image :src="item.store.store_logo" style="width: 48rpx;height: 48rpx;" />
									<text>{{item.store.store_name}}</text>
								</view>
							</view>
							<view class="right">{{item.status_text}}</view>
						</view>
						<view class="order-goods-rows order-ry-goods-rows">
							<view class="order-goods-row-item">
								<image :src="item.goods_img" mode="widthFix" class="goods-img"></image>
								<view class="right">
									<view class="ry-goods-name">
										<text class="name">{{item.goods_name}}</text>
										<view class="ry-goods-name-right">
											<image
												src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/order/jiasu.png"
												mode="widthFix"></image>
											<text>加速值：{{item.speed}}</text>
										</view>
									</view>
									<view class="ry-right-bot">
										<view class="shuliang">数量：{{item.goods_num}}{{item.unit}}</view>
										<view class="zhouqi">认养周期：{{item.sy_day}}天</view>
									</view>
								</view>
							</view>
						</view>
						<view class="ry-total">
							<view class="left">订单号：{{item.order_sn}}</view>
							<view class="right">
								<text class="heji">合计：</text>
								<text>{{item.order_amount}}元</text>
							</view>
						</view>
						<view class="ry-order-bot">
							<view class="left">
								<button size="mini" @click.stop="goXieyi(0,item.order_id)">查看协议</button>
							</view>
							<view class="right">
								<block v-if="item.order_status==-1">
									<button size="mini" @click.stop="cancel(item)">取消订单</button>
									<button size="mini" class="confirm" @click.stop="payment(item)">立即支付</button>
								</block>
								<block v-else>
									<button size="mini">查看订单</button>
								</block>
								<block v-if="item.order_status>0 && item.surplus_yield>0 && item.feed_status!=3">
									<block v-if="item.can_feed==0">
										<button size="mini" class="dis" disabled="true">明日可领</button>
									</block>
									<block v-else>
										<button size="mini" class="confirm" v-if="item.feed_status==1"
											@click.stop="feed(item,1)">去喂食</button>
										<button size="mini" class="confirm" v-if="item.feed_status==2"
											@click.stop="feed(item,2)">领取收益</button>
									</block>
								</block>
							</view>
						</view>
					</view>
					<u-loadmore :status="hasMore?'loading':'nomore'" />
				</view>
			</scroll-view>
			<view class="empty-container" v-else>
				<u-empty text="暂无相关订单" :icon="emptyIcon" />
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="cancel_show" round="10"
			:overlay="true" :customStyle="customStyle1" @close="cancel_show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认取消？</text>
				<view class="u-popup-slot_flex">
					<button @click="cancel_show = !cancel_show" class="cancel">取消</button>
					<button @click="CancleOrder()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		payment
	} from "../../common/helper";
	var _this;
	export default {
		data() {
			return {
				user: '',
				list1: [{
					name: '全部',
				}, {
					name: '认养中',
				}, {
					name: '已完成'
				}],
				customStyle1: {
					'width': '80%'
				},
				cancel_show: false,
				currentIndex: 0,
				emptyIcon: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				hasMore: true,
				pageIndex: 1,
				list: [],
				temp_item: {}
			};
		},
		onReachBottom() {
			if (_this.hasMore) {
				_this.pageIndex++
				_this.get_list()
			}
		},
		methods: {
			//跳转到协议详情页面
			to_xieyi() {
				this.$u.route({
					url: '/pages/index/html-detail',
					params: {
						title: '认养协议',
						url: encodeURIComponent('/api/xieyi_xq?id=2')
					}
				})
			},
			//获取用户信息
			async get_user_info() {
				// post请求
				const data = await _this.$post('api/UserInfo')
				if (data.code == 200) {
					this.user = data.data.user
				} else {
					this.$u.toast(data.msg)
				}
			},
			toDetail(item, index) {
				uni.navigateTo({
					url: `/pages/foster/foster-order-detail?id=${item.order_id}&index=${index}`
				})
			},
			async get_list() {
				const params = {
					pageIndex: this.pageIndex,
					pageSize: 20,
					status: _this.currentIndex,
				}
				const data = await _this.$post('api/get_ry_dd_list', params)
				if (data.code == 200) {
					_this.list.push(...data.data.list)
					_this.hasMore = data.data.list.length >= 20
				} else {
					_this.hasMore = false
				}
			},
			itemClick(index) {
				_this.currentIndex = index
				_this.pageIndex = 1
				_this.list = []
				_this.get_list()
			},
			async feed(item, type) {
				if (_this.user.is_fodder == 0) {
					uni.navigateTo({
						url: '/pages/index/fodder-lq'
					})
					return
				}
				let params = {
					order_id: item.order_id,
					type
				}
				const data = await _this.$post('api/ry_dd_feed', params)
				if (data.code == 200) {
					this.$u.toast(data.msg)
					item.feed_status = type == 1 ? 2 : 3
				} else {
					this.$u.toast(data.msg)
				}
			},
			//点击取消按钮
			cancel(item) {
				this.temp_item = item
				this.cancel_show = true
			},
			//取消订单
			async CancleOrder() {
				const params = {
					id: this.temp_item.order_id
				}
				//发送请求
				const data = await _this.$post('api/ry_dd_cancel', params)
				if (data.code == 200) {
					uni.$u.toast(data.msg)
					_this.temp_item['order_status'] = -2
					_this.temp_item['status_text'] = '已取消'
					this.cancel_show = false
				} else {
					uni.$u.toast(data.msg)
				}
			},
			async payment(item) {
				let form = {
					order_id: item.order_id,
					is_zhifu: 1,
				}
				const data = await _this.$post('api/ry_dd_xq', form)
				if (data.code == 50) {
					//唤起支付
					uni.requestPayment({
						provider: data.data.pay_code,
						orderInfo: data.data.result,
						success(res) {
							_this.$u.toast('支付成功')
							item.order_status = 1
							item.status_text = '认养中'
						},
						fail(err) {
							_this.$u.toast('支付失败')
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else if (data.code === 60) {
					try {
						await payment(data.data)

						_this.$u.toast('支付成功')
						item.order_status = 1
						item.status_text = '认养中'
					} catch (e) {
						_this.$u.toast('支付失败')
					}
				} else {
					uni.$u.toast(data.msg)
				}
			},
		},
		onLoad(e) {
			_this = this;
			if (e.currentIndex) {
				_this.currentIndex = e.currentIndex
			}
			uni.$on('doFosterOrder', res => {
				if (res.type == 1) {
					_this.list[res.index]['order_status'] = -2
					_this.list[res.index]['status_text'] = '已取消'
				} else {
					_this.list[res.index]['order_status'] = 1
					_this.list[res.index]['status_text'] = '认养中'
				}
			})
			_this.get_list()
		},
		onUnload() {
			uni.$off('doFosterOrder')
		},
		onShow() {
			_this.get_user_info()
		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/order.scss";

	.container {
		padding: 0;

		.foster-order-top {
			.top {
				background: $theme-color;
				@include flex-box(column, center, center);
				height: 300rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.nickname {
					margin-top: 20rpx;
					color: #fff;
					font-size: 32rpx;
				}
			}

			.shuju-items {
				background: #fff;
				padding: 0 30rpx;
				@include flex-box(row, null, center);
				height: 160rpx;

				.shuju-item {
					flex: 1;
					text-align: center;
					position: relative;

					&:not(:last-child)::after {
						content: '';
						width: 2rpx;
						height: 76rpx;
						background: $border-F7F7F7;
						position: absolute;
						right: 0;
						top: calc(50% - 38rpx);
					}

					.hint {
						font-size: 22rpx;
						font-weight: bold;
					}

					.num {
						font-size: 30rpx;
						font-weight: 500;
						margin-top: 30rpx;
					}
				}
			}
		}

		.foster-order-items {
			margin-top: 20rpx;

			.scroll {
				background: #fff;

				.order-items {
					padding: 20rpx 30rpx 0 30rpx;

					.order-item {
						box-shadow: $global-shade;
					}
				}
			}
		}
	}
</style>